<extend name="Common/base"/>

<block name="body">
    <style>
        .content:before {
             bottom: 0;
        }
        @media screen and (max-width: 1025px){
            html{
                background: #000;
            }
            .slider{
                position: fixed;
                bottom: 0;
                top: 0;
                left: 0;
                width: 100%;
                min-width: 200px;
                min-height: 200px;
            }
            .swiper-container{
                height: 100%;
            }
            .swiper-slide{
                display: flex;
                justify-content: center;
            }
        }
        @media screen and (min-width: 1025px){
            .container {
                padding-bottom:0;
            }
        }
        .content{
            padding: 0;
        }
        .rich_media_content{
            /*display: none;*/
        }
        
    </style>
    <div class="container">
        <div class="content">
            <div class="slider js_plugin" id="namespace_0" data-pid="1">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                
                        <volist name=":get_images($info['images'])" id="info">
                            <div class="swiper-slide ">
                                <img scaleContent="true" maintainAspectRatio="false" src="http://{:C('DOMAIN')}{$info.path}" class="img noShow" style="float: left;">
                            </div>
                        </volist>
            
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Pagination -->
                </div>
        
                <!-- Swiper JS -->
                <script src="__JS__/swiper.min.js"></script>
        
                <!-- Initialize Swiper -->
                <script>
                    var swiper = new Swiper('.swiper-container', {
                        pagination: '.swiper-pagination',
                        paginationClickable: true,
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        autoHeight: true, //enable auto height
                    });
                </script>
            </div>
        </div>
    </div>
    <script src="__STATIC__/domove.js"></script>
    <script>
        window.onload=function(){
            var oBox=document.getElementById("wrap");
            var oUl=oBox.children[0];
            var aLi = oUl.children;
            var iNow = 0;
            oBox.onmousedown=function(ev){
                var ev=ev||event;
                var disX=ev.clientX-oUl.offsetLeft;
                var downX = ev.clientX;
                document.onmousemove=function(ev){
                    var ev=ev||event;
                    var X=ev.clientX-disX;
                    oUl.style.left=X+"px";
                }
                document.onmouseup=function(ev){
                    document.onmousemove=null;
                    document.onmouseup=null;
                    var ev=ev||event;
                    var upX=ev.clientX;
                    console.log(downX)
                    console.log(upX)
                    if(Math.abs(upX-downX)>30){
//如果按下比抬起大，下一张
                        if(downX>upX){
                            iNow++;
                            if(iNow>3)iNow=3;
                        }else{
//如果按钮比抬起小，上一张
                            iNow--;
                            if(iNow<0)iNow=0;
                        }
                    }
                    doMove(oUl,{left:-iNow*aLi[0].offsetWidth},{duration:700,easing:Tween.Bounce.easeOut});
                    oUl.releaseCapture&&oUl.releaseCapture();
                }
//console.log(oUl.offsetLeft)
                oUl.setCapture&&oUl.setCapture();
                return false;
            }
        }
    </script>
</block>
